<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/plugins/echarts/echarts.js"></script>
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <style>

    </style>

</head>

<body class="gray-bg">
    <div id="priceTrend" style="width: 340px;height:170px;">

    </div>

    <script>
        $(function() {

            const dateFormat = function(originVal) {
                const dt = new Date(originVal)

                const y = dt.getFullYear()
                const m = (dt.getMonth() + 1 + '').padStart(2, '0')
                const d = (dt.getDate() + '').padStart(2, '0')
                const hh = (dt.getHours() + '').padStart(2, '0')
                const mm = (dt.getMinutes() + '').padStart(2, '0')
                const ss = (dt.getSeconds() + '').padStart(2, '0')

                // yy-mm-dd hh:mm:ss
                // 可以根据需要输出相对应的时间格式
                return `${y}-${m}-${d}`
            }

            var trendCharts = echarts.init(document.getElementById('priceTrend'));
            trendCharts.clear();
            window.addEventListener('message', (e) => {
                trend_url = e.data
                console.log('iframe get data=', trend_url)
                trendCharts.clear();
                trendCharts.showLoading(); //数据加载完之前先显示一段简单的loading动画
                let param = new URLSearchParams()
                param.append('url', trend_url)
                axios.post('http://127.0.0.1:8000/priceTrend/', param).then(
                    function(response) {
                        var resp = response.data
                        title = resp['title']
                        data = resp['data']
                            // console.log('data=', data)
                        console.log('title=', title)

                        trendCharts.setOption({
                            title: {
                                text: title
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['评论数']
                            },
                            grid: {
                                x: 40,
                                x2: 40,
                                y2: 24
                            },
                            calculable: true,
                            xAxis: [{
                                type: 'time',
                                boundaryGap: false,
                            }],
                            yAxis: [{
                                type: 'value',
                            }],
                            series: [{
                                name: '',
                                type: 'line',
                                data: data,
                                markPoint: {
                                    data: [{
                                        type: 'max',
                                        name: '最大值'
                                    }, {
                                        type: 'min',
                                        name: '最小值'
                                    }]
                                },
                                markLine: {
                                    data: [{
                                        type: 'average',
                                        name: '平均值'
                                    }]
                                }
                            }, ]
                        });
                        trendCharts.hideLoading();
                        $(window).resize(trendCharts.resize);
                    },
                    function(err) {
                        console.log(err)
                        $(window).resize(trendCharts.resize);
                    }
                )


            })
        })
    </script>




</body>

</html>